<template>
  <div class="page">
    <h2>每日歇后语</h2>
    <div v-if="loading" class="xhy-loading">加载中...</div>
    <div v-else class="xhy-item">
      <div class="xhy-question">{{ xhy.riddle }}</div>
      <div v-if="showAnswer" class="xhy-answer">{{ xhy.answer }}</div>
      <button v-if="!showAnswer" @click="showAnswer = true">显示答案</button>
      <button v-else @click="fetchXHY">换一个</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const xhy = ref({ riddle: '', answer: '' })
const loading = ref(true)
const showAnswer = ref(false)

async function fetchXHY() {
  loading.value = true
  showAnswer.value = false
  try {
    const res = await fetch('https://www.mxnzp.com/api/xiehouyu/random?app_id=mrfjmtn2heawpjif&app_secret=wctcTdWBenOALNujImfp9F1rZZkTPOXF')
    const data = await res.json()
    if (data.code === 1 && data.data) {
      xhy.value = {
        riddle: data.data.riddle || '无',
        answer: data.data.answer || '无'
      }
    } else {
      xhy.value = { riddle: data.msg || '获取失败', answer: '' }
    }
  } catch (e) {
    xhy.value = { riddle: '获取失败，请检查网络', answer: '' }
  } finally {
    loading.value = false
  }
}

onMounted(fetchXHY)
</script>

<style scoped>
.page {
  text-align: center;
  margin-top: 60px;
}
button {
  margin-top: 20px;
  padding: 8px 24px;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover {
  background: #369870;
}
</style> 